<template>
  <div  class='testdiv'>
    <a-row>
      <a-col :span="12"  class='mb20'>
          <a-input  placeholder="请输入名称" style='width: 200px'  v-model='search.keyWord'/>
          <a-button type="primary" @click='roleInit(currentTab)'>搜索</a-button>
      </a-col>
    </a-row>
    <a-row  class='mb20'>
      <a-col :span="6">   
            <a-button type="primary" icon="plus-circle"  @click='add'>新建</a-button>
        </a-col>
    </a-row>
    <a-tabs v-model='currentTab' @change="tabChange"  type='card'  animated>
        <a-tab-pane tab="内部员工" :key="1"></a-tab-pane>
        <a-tab-pane tab="外部客户" :key="2" ></a-tab-pane>
    </a-tabs>
    <a-table :columns="columns" :dataSource="data"  :pagination="pagination"   :rowKey="record => record.code">
      <span slot="customTitle">名称</span>
      <span slot="modifyTime" slot-scope="text, record"  > 
        {{text | formatDate}}
      </span>
      <span slot="action" slot-scope="text, record"  > 
        <a  class='color-blue'  @click='edit(record.code)'>编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
            <a href="javascript:;"  class='color-red'>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <addRole  ref='roleModal' :visible='showAddRole'  :MenuData='currentMenu'  v-on:handleCancel='showAddRole=false'  v-on:handleOk='handleOkRole()'></addRole>  
  </div>
</template>

<script>
import  { RoleInit,delRole }  from  '@/api/system/index'
import  {  menuList,menuListCustomer  }  from  '@/api/system/jurisdiction'
import  addRole  from  '@/components/system/character/addRole' 

export default {
  name: 'character',
  data () {
    return {
      columns:[{
        dataIndex: 'name',
        key: 'name',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'name' },
      }, {
        title: '描述',
        dataIndex: 'description',
      }, {
        title: '相关用户',
        dataIndex: 'userNum',
      },
      {
        title: '更新时间',
        // slots: { title: 'time' },
        dataIndex: 'modifyTime',
        scopedSlots: { customRender: 'modifyTime' },
      },{
        title: '创建人',
        dataIndex: 'createUserName',
      },  
       {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
      //
      search:{
        pageNo:1,
        pageSize:10,
        keyWord:''
      },
      currentTab:1,

      data:[],
      pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,

          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      }, 
      showAddRole:false,
      showAddCustomer:true,

      currentMenu:[],
      //
      MenuData:[],
      MenuData_cus:[], 
    }
  },
  created(){
    this.roleInit(1)
    this.menuInit()
  },
  methods:{
    roleInit(val){
        let url;
        if(val==1){
          url='/sys/role/get_role_list'
        }
        if(val==2){
          url='/sys/client_role/get_client_role_list' // 获取客户角色列表
        }

        RoleInit(url,this.search).then((res)=>{
          this.data = res.data.dataList
        })
    },
    menuInit(){
      // menuList({pageSize:200}).then((res)=>{
      //   let data = res.data.dataList
      //   // this.MenuData =data
      //   this.MenuData = this.formTree(data)
      // })
      let menu1 = new Promise((resolve,reject)=>{
          menuList({pageSize:200}).then((res)=>{
              resolve(res.data.dataList)
          })
      })
      let menu2 = new Promise((resolve,reject)=>{
          menuListCustomer({pageSize:200}).then((res)=>{
            resolve(res.data.dataList)
          })
      })
      Promise.all([menu1,menu2]).then((res)=>{
        this.MenuData = this.formTree(res[0])
        this.MenuData_cus = this.formTree(res[1])
      }).catch((error)=>{

      })
    },

    tabChange(val){ 
      this.search.keyWord = '' 
      this.search.pageNo = 1
      this.search.pageSize = 10
      this.roleInit(val)
    },

    add(){
      this.currentMenu = this.currentTab == 1 ? this.MenuData : this.MenuData_cus 
      this.$refs.roleModal.$emit('openDialog',this.currentTab)
      this.showAddRole = true
    },
    edit(code){
      this.currentMenu = this.currentTab == 1 ? this.MenuData : this.MenuData_cus 
      this.$refs.roleModal.$emit('editDialog',code,this.currentTab)
      this.showAddRole = true
    },
    handleOkRole(){ 
        this.showAddRole = false 
        this.roleInit(this.currentTab) 
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    confirmDel(code){
      let url
      if(this.currentTab == 1){
        url='/sys/role/delete_role'
      }
      if(this.currentTab == 2){
        url='/sys/client_role/delete_client_role'
      }
      delRole(url,code).then((res)=>{
          this.$message.info(res.data.msg)
          this.roleInit(this.currentTab)
      })
    },
     /*工具函数*/
    //data 转换为 树类型
    formTree(List){
        let data = [];

        List.forEach((item)=>{
          if( item.parentId == '0'){
              data.push({
                key:item.code,

                id:item.id,
                name:item.name,
                code:item.code,
                parentId:item.parentId,
                isMenu:item.isMenu,/*加入菜单 判断是否显示新增*/
                scopedSlots: { title: 'custom' },
              })
          }
        })
        // console.log(this.departList)
        return this.formNextTreeTest(List,data)
    },
    //二级及以上 树类型
    formNextTreeTest(List,data){
          data.forEach((item,index)=>{
          let child= []
          List.forEach((it)=>{
              if(item.id == it.parentId){
                  child.push({
                    key:it.code,

                    id:it.id,
                    name:it.name,
                    code:it.code,
                    parentId:it.parentId,
                    isMenu:it.isMenu,
                    scopedSlots: { title: 'custom' },
                  })
              }
            })
            item.children=child
            if(child.length>0){
                this.formNextTreeTest(List,child) //递归
            }
          })
          return data
    },
  },
  components:{
    addRole,
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
